<div class="wrapper-bz-page">
    <div class="wrapper-bz-body">
        <div class="column-block block-left" style="width:250px;">
            <div class="column-title">页面</div>
            <div class="column-content">
                <div class="column-datagrid no-filter">
                    <table id="table_poem_clockin_activity_in_add_clockin_activity_plan" style="width:100%;height:100%"></table>
                </div>
            </div>
        </div>
        <div class="column-block block-right" style="left:260px;">
            <div class="column-title">打卡活动计划安排</div>
            <div class="column-content">
                <div class="column-datagrid no-filter">
                    <div id="table_poem_clockin_activity_plan_calendar_in_add_clockin_activity_plan" style="width:100%;height:100%"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="dialog_add_poem_clockin_activity_plan_calendar_in_add_clockin_activity_plan"></div>
<div id="dialog_edit_poem_clockin_activity_plan_calendar_in_add_clockin_activity_plan"></div>
<script>
    $(function () {
        var subject_1 = "poem_clockin_activity_in_add_clockin_activity_plan";
        var subject_2 = "poem_clockin_activity_plan_calendar_in_add_clockin_activity_plan";
        //列表-对话框-表单
        var tableId_1 = '#table_' + subject_1;
        var tableId_2 = '#table_' + subject_2;

        var tableObject_1 = $(tableId_1);
        var tableObject_2 = $(tableId_2);
        var addDialogId_2 = '#dialog_add_' + subject_2;

        var paramDataAdd_2 = {};
        var paramDataEdit_2 = {};

        var selectLeftMainId = 0;
        var clickLeftRowIndex = 0;
        var selectDayDate = '';
        var calendarEl = document.getElementById("table_poem_clockin_activity_plan_calendar_in_add_clockin_activity_plan");
        var calendarObject = {};

        var nowDateObject = new Date();
        var nowMonthDate = formatMonthDate(nowDateObject);
        var configDialogAdd_2 = {
            href: '/admin/ClockinActivityPlan/pageListPoem',
            title: '诗词打卡计划安排',
            queryParams: {},
            width: dialogTwoColumnWidth,
            height: dialogDefaultHeight,
            modal: true,
            onClose: function(){
                console.log("trigger close");
                tableObject_1.datagrid('selectRow', clickLeftRowIndex);
            },
            buttons:[{
                text:'<span class="dialog-btn-ok"><i class="fa fa-check"></i>保存</span>',
                plain:true,
                handler:function(){
                    var checkList = $("#table_lib_poem_in_clockin_activity_plan").datagrid("getChecked");
                    if(checkList.length < 1){
                        layer.msg('请选择要添加的诗词');
                        return false;
                    }

                    var idArr = [];
                    $.each(checkList, function(index, item){
                        idArr.push(item.id);
                    });
                    console.log("select day date:", selectDayDate);
                    var respCode = setPoemClockinActivityPlan(selectLeftMainId, selectDayDate, idArr[0]);
                    if(1 == respCode){
                        $(addDialogId_2).dialog('close');
                        var dateObj = new Date(selectDayDate);
                        refreshCalendar(selectLeftMainId, dateObj);
                    }
                }
            },{
                text:'<span class="dialog-btn-cancel"><i class="fa fa-times"></i>取消</span>',
                plain:true,
                handler:function(){
                    $(addDialogId_2).dialog('close');
                }
            }]
        };

        var configDatagrid_1 = {
            url: '/api/ClockinActivity/getRecentClockinActivityList',
            method: 'post',
            remoteSort: false,
            queryParams: {},
            pageList: [30, 50, 100],
            pageSize: 30,
            pagination: false,
            clickToEdit: false,
            dblclickToEdit: false,
            singleSelect: true,
            checkOnSelect: true,
            selectOnCheck: true,
            rownumbers: false,
            striped: true,
            fitColumns: true,
            fit: true,
            frozenColumns: [[
                {field: 'ck', title: 'ck', checkbox: true},
            ]],
            columns: [[
                {field: 'id', title: 'ID', width: 40, hidden: true},
                {field: 'activity_name', title: '活动名称', width: 100},
                // {field:'clockin_person_num',title:'打卡人数',width:100},
                // {field:'step_status',title:'进行状态',width:100},
            ]],
            loadFilter: function (data) {
                return loadFilter(data, false);
            },
            onSelect: function (index, row) {
                console.log("enter select row");
                clickLeftRowIndex = index;
                selectLeftMainId = row.id;
                refreshCalendar(selectLeftMainId, nowDateObject);
            },
            onCheck: function (index, row) {
            },
            onUncheck: function (index, row) {
            },
            rowStyler: function (index, row) {
                if (row.role_user_id > 0 && selectRoleId > 0) {
                    return 'background:#c6e9ff';
                }
            },
            onLoadSuccess: function () {
                tableObject_1.datagrid('selectRow', 0);
                $(".datagrid-header-check").html("");
            },
            toolbar: [
                {
                    text: '<i class="fa fa-refresh tool-button-refresh"></i> 刷新',
                    plain: true,
                    handler: function () {
                        tableObject_1.datagrid('reload');
                    }
                }
            ]

        };



        var calendarConfig = {
            initialView: 'dayGridMonth',
            locale: 'zh',
            fixedWeekCount: false,
            headerToolbar: {
                start: 'today',
                center: 'title',
                end: 'prevYear,prev,next,nextYear'
            },
            buttonText: {
                today: '今天'
            },
            events: [],
            eventContent: function(cell){
                var content = $('<div />');

                console.log("title:", cell.event.title);
                var title = cell.event.title;
                var titleArr = title.split("&&");
                //诗词标题加粗
                content.append($('<strong />').text(titleArr[0]));
                //诗人加个className,方便控制css样式
                content.append($('<div class="poet">').text(titleArr[1]));

                return { html: content.get(0).outerHTML };
            },
            dateClick: function(dateObj){
                if(!selectLeftMainId){
                    layer.msg("请先指定打卡活动");
                    return ;
                }
                selectDayDate = dateObj.dateStr;
                configDialogAdd_2.queryParams = {plan_date:dateObj.dateStr, clockin_activity_id:selectLeftMainId};
                $(addDialogId_2).dialog(configDialogAdd_2);
            }
        };
        tableObject_1.datagrid(configDatagrid_1);

        // SearchCombobox('search_input_user_in_role','table_user_in_role',function (val,name) {
        //     configDatagrid_1.queryParams = {};
        //     configDatagrid_1.queryParams[name] = val;
        //     if(selectRoleId){
        //         configDatagrid_1.queryParams['role_id'] = selectRoleId;
        //     }
        //     tableObject_1.datagrid(configDatagrid_1);
        // },['ck','ID']);

        function getCheckedRowData(opText) {
            var checkList = tableObject.datagrid('getChecked');
            if (checkList.length < 1) {
                layer.msg('请选择要' + opText + '的数据');
                return false;
            }
            return checkList;
        }

        function getCheckedRowData_1(opText) {
            var checkList = tableObject_1.datagrid('getChecked');
            if (checkList.length < 1) {
                layer.msg('请选择要' + opText + '的数据');
                return false;
            }
            return checkList;
        }



        function refreshCalendar(clockinActivityId, dateObject){
            var monthDate = formatMonthDate(dateObject);
            calendarConfig.initialDate = formatDate(dateObject);
            calendarConfig.events = getClockinActivityPlanByMonth(clockinActivityId, monthDate);
            console.log("calendar config", calendarConfig);
            calendarObject = new FullCalendar.Calendar(calendarEl, calendarConfig);

            console.log("why not work");
            calendarObject.render();
        }

        $(document).on("click", ".fc-prev-button", function(){
            var date = calendarObject.getDate();
            var newDateObject = new Date(date);

            calendarConfig.initialDate = formatDate(newDateObject);
            calendarConfig.events = getClockinActivityPlanByMonth(selectLeftMainId, formatMonthDate(newDateObject));
            refreshCalendar(selectLeftMainId, newDateObject);
        });

        $(document).on("click", ".fc-next-button", function(){
            var date = calendarObject.getDate();
            var newDateObject = new Date(date);

            calendarConfig.initialDate = formatDate(newDateObject);
            calendarConfig.events = getClockinActivityPlanByMonth(selectLeftMainId, formatMonthDate(newDateObject));
            refreshCalendar(selectLeftMainId, newDateObject);
        });

        function getClockinActivityPlanByMonth(clockinActivityId, planMonth) {
            var planData = [];
            $.ajax({
                url: '/api/ClockinActivityPlan/getClockinActivityPlanListByMonth',
                async: false,
                type: 'post',
                data: {clockin_activity_id: clockinActivityId, plan_month: planMonth},
                success: function (resp) {
                    if (1 == resp.code) {
                        $.each(resp.data, function(index, planItem){
                            var poemTitle = planItem.title + '&&' + planItem.dynasty + '·' + planItem.poet;
                            var cellData = {title: poemTitle, start:planItem.plan_date, end:planItem.plan_date};
                            planData.push(cellData);
                        })
                    }
                }
            });
            return planData;
        }

        function setPoemClockinActivityPlan(clockinActivityId, planDate, subjectId)
        {
            var code = 0;
            $.ajax({
                url: '/api/ClockinActivityPlan/addClockinActivityPlan',
                async: false,
                type:'post',
                data:{clockin_activity_id: clockinActivityId, plan_date:planDate, subject_id:subjectId, content_type:1},
                success:function(resp){
                    code = resp.code;
                    if( 0 == resp.code ){
                        layer.msg(resp.message);
                    }
                }
            });
            return code;
        }

    });


</script>
